<template>
  <div style="padding: 1rem 0 0 0 ;text-align: center;">
    <div style="font-size: 25px;font-family: 黑体;font-weight:500;color: black;margin-bottom: 0.7rem;">扫码登录</div>
    <div>
      <img :src="qrimg"
           height="180" width="180">
      <p>使用网易云音乐APP扫码登录</p>
    </div>
    <div style="font-size: 13px;">
      <label @click="otherLogin">选择其他登录方式 ></label>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex"
import {userAccount} from "@/api/api";
import Vue from "vue";
import {USER_COOKIE,USER_ACCOUNT,USER_PROFILE} from "@/store/mutation-types";

const userData = {
  "code": 200,
  "account": {
    "id": 136993528,
    "userName": "1_********346",
    "type": 1,
    "status": 0,
    "whitelistAuthority": 0,
    "createTime": 1456327567783,
    "tokenVersion": 0,
    "ban": 0,
    "baoyueVersion": -1,
    "donateVersion": 0,
    "vipType": 0,
    "anonimousUser": false,
    "paidFee": false
  },
  "profile": {
    "userId": 136993528,
    "userType": 0,
    "nickname": "Zone-Wonderful",
    "avatarImgId": 109951163956016930,
    "avatarUrl": "http://p1.music.126.net/3S_3gp0BV-6zOTKMzcRLYA==/109951163956016936.jpg",
    "backgroundImgId": 18867619532944364,
    "backgroundUrl": "http://p1.music.126.net/SoTyxb7Vxi_k1cLUOVJrBg==/18867619532944363.jpg",
    "signature": "啦啦啦啦德玛西亚",
    "createTime": 1456327605539,
    "userName": "1_********346",
    "accountType": 1,
    "shortUserName": "********346",
    "birthday": 751478400000,
    "authority": 0,
    "gender": 1,
    "accountStatus": 0,
    "province": 150000,
    "city": 150100,
    "authStatus": 0,
    "description": null,
    "detailDescription": null,
    "defaultAvatar": false,
    "expertTags": null,
    "experts": null,
    "djStatus": 0,
    "locationStatus": 30,
    "vipType": 0,
    "followed": false,
    "mutual": false,
    "authenticated": false,
    "lastLoginTime": 1644333580450,
    "lastLoginIP": "1.183.27.91",
    "remarkName": null,
    "viptypeVersion": 1642522045270,
    "authenticationTypes": 0,
    "avatarDetail": null,
    "anchor": false
  }
}

export default {
  props: {
    loginStatus: String
  },
  data() {
    return {
      qrimg: '',
    };
  },
  mounted() {
    // Vue.ls.set(USER_ACCOUNT, userData.account)
    // Vue.ls.set(USER_PROFILE, userData.profile)
     this.qrLogin();
  },
  methods: {
    ...mapActions(["login", "checkLoginStatus",]),
    qrLogin() {
      if (Vue.ls.get(USER_ACCOUNT) && Vue.ls.get(USER_PROFILE) ){
        this.$store.commit('SET_ACCOUNT', Vue.ls.get(USER_ACCOUNT));
        this.$store.commit('SET_PROFILE', Vue.ls.get(USER_PROFILE));
        this.showInfo();
      }

      let _this = this;
      // 二维码登录
      _this.login('qr').then(res => {
        _this.qrimg = res.qrimg;
        _this.checkLoginStatusMethods(res.key)
      })
    },
    checkLoginStatusMethods(key) {
      let _this = this;
      let timer = setInterval(async () => {
        _this.checkLoginStatus(key).then(res => {
          if (res.code === 800) {
            this.$message.success('二维码已过期,请重新获取!')
            clearInterval(timer)
          }
          if (res.code === 803) { // 授权成功
            clearInterval(timer)
            this.$message.success('授权登录成功!')
            Vue.ls.set(USER_COOKIE, res.cookie)
            _this.getStatus()
          }
        })
      }, 1000)
    },
    getStatus() {
      let _this = this;
      let counter = 0; // 计数器
      let timer = setInterval(async () => {
        let params = {
          'cookie': Vue.ls.get(USER_COOKIE)
        }
        // 获取用户信息
        userAccount(params).then((res) => {
          if (res.code == 200 && res.account && res.profile) {
            clearInterval(timer)
            _this.$store.commit('SET_ACCOUNT', res.account)
            _this.$store.commit('SET_PROFILE', res.profile)
            Vue.ls.set(USER_ACCOUNT, res.account)
            Vue.ls.set(USER_PROFILE, res.profile)
            _this.showInfo();
          } else {
            // 防止计时器无休止执行
            if (counter == 10) {
              clearInterval(timer)
            }
          }
        })
      }, 3000);
    },
    showInfo() {
      // this.$parent.$refs.userInfo.showInfo();
      this.$emit('loginStatus');
    },
    otherLogin() {
      this.$message.success('开发中，敬请期待！');
    },
  },
};
</script>

<style scoped>

</style>
